<template>
  <div>
    <div v-if="shows == 'list'">
      <Header>
        <el-button size="small" type="primary" @click="add">添加商品</el-button>
        <el-button size="small" type="primary" @click="msg('', 'all')">
          批量修改
        </el-button>
        <el-button size="small" @click="del()">批量删除</el-button>
      </Header>
      <Header :type="'screening'" @tag="getList" @reset="reset">
        <div class="head-tit">
          内容筛选
        </div>
        <div class="head-operation">
          <span class="head-label">
            选择状态：
          </span>
          <el-select
            v-model="selectVal"
            placeholder="请选择"
            size="small"
            class="head-input"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span class="head-label">
            选择分类：
          </span>
          <el-cascader
            v-model="selectValTwo"
            :options="optionsTwo"
            :props="defaultProps"
            size="small"
            class="head-input"
            clearable
            @change="getList"
          ></el-cascader>
          <span class="head-label">
            选择标签：
          </span>
          <el-select
            v-model="selectValThree"
            placeholder="请选择"
            size="small"
            class="head-input"
          >
            <el-option
              v-for="item in optionsThree"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <span class="head-label">
            商品名称：
          </span>
          <el-input
            v-model="searchName"
            placeholder="请输入"
            size="small"
            class="head-input"
          >
          </el-input>
        </div>
      </Header>

      <Main
        :data="listData"
        :footer-lock="totals > 10"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          label="商品名称"
          align="center"
          property="goods_name"
        ></el-table-column>
        <el-table-column label="商品封面" align="center">
          <template slot-scope="scope">
            <img
              :src="
                $store.state.qiniu +
                  scope.row.goods_cover.split(',')[0] +
                  $store.state.imgRotate
              "
              width="80px"
            />
          </template>
        </el-table-column>
        <el-table-column label="销售价格" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.low_goods_price == scope.row.up_goods_price"
              >￥{{ scope.row.low_goods_price }}</span
            >
            <span v-else
              >￥{{ scope.row.low_goods_price }} - ￥{{
                scope.row.up_goods_price
              }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="成本价格" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.low_cost == scope.row.up_cost"
              >￥{{ scope.row.low_cost }}</span
            >
            <span v-else
              >￥{{ scope.row.low_cost }} - ￥{{ scope.row.up_cost }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="用户分佣比例" align="center" width="255">
          <template slot-scope="scope">
            <div
              class="disf disl"
              :style="
                scope.row.type === 1
                  ? 'background-color:#909399'
                  : 'background-color:#67C23A'
              "
            >
              {{ scope.row.type === 1 ? "默认" : "自定义" }}
            </div>
            <div class="disf disr">
              <div v-for="(item, index) in scope.row.bili" :key="index">
                {{ item.name }}:&nbsp;&nbsp; {{ item.bili }}%&nbsp; (<span
                  v-if="item.low_goods_price == item.up_goods_price"
                  >￥{{ item.low_goods_price }}</span
                >
                <span v-else
                  >￥{{ item.low_goods_price }} - ￥{{
                    item.up_goods_price
                  }}</span
                >)
              </div>
            </div>
          </template>
        </el-table-column>

        <el-table-column
          label="实际销量"
          align="center"
          property="sale_nums"
        ></el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 'normal'" style="color:#67C23A;">
              上架
            </span>
            <span v-else style="color:#F56C6C;">
              下架
            </span>
          </template>
        </el-table-column>
        <el-table-column
          label="推广排序"
          align="center"
          property="sort"
        ></el-table-column>

        <el-table-column
          label="操作"
          align="center"
          fixed="right"
          width="250"
          class-name="tableoperation"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              @click="msg(scope.row, 'single')"
            >
              编辑
            </el-button>
            <el-button
              size="mini"
              type="text"
              @click="del(scope.row.distribute_goods_id)"
            >
              移除
            </el-button>
            <el-button
              v-if="scope.row.is_hot == 0"
              size="mini"
              type="text"
              @click="set(scope.row.distribute_goods_id, 1)"
            >
              设为优选
            </el-button>
            <el-button
              v-else
              size="mini"
              type="text"
              style="color:#F56C6C"
              @click="set(scope.row.distribute_goods_id, 0)"
            >
              取消优选
            </el-button>
          </template>
        </el-table-column>
      </Main>
      <Footer :total="totals">
        <el-pagination
          :page-size="10"
          layout="prev, pager, next"
          :total="totals"
          @current-change="changes"
        >
        </el-pagination>
      </Footer>
    </div>

    <shop v-if="shows == 'add'" @out="out" />

    <shop-msg
      :visible="visible"
      :form-data="formData"
      :types="'edit'"
      @dialogOut="dialogOut"
    />
  </div>
</template>
<script>
import { GETLISTShopClass, TAGLIST } from "@/service/shop";
import { DISTRIBUTEGOODSLIST, REMOVEDISTRIBUTEGOODS, SETHOT } from "../service";

export default {
  components: {
    shop: () => import("./component/shop"),
    shopMsg: () => import("./component/shopMsg")
  },
  data() {
    return {
      listData: [],
      searchName: "",
      selectVal: 0,
      selectValTwo: 0,
      selectValThree: 0,
      options: [
        { label: "全部状态", value: 0 },
        { label: "上架", value: "normal" },
        { label: "下架", value: "temporarily" }
      ],
      optionsTwo: [],
      defaultProps: {
        value: "type_id",
        children: "second",
        label: "type_name",
        checkStrictly: true
      },
      optionsThree: [{ name: "全部标签", id: 0 }],
      totals: 0,
      pages: 0,
      shows: "list",
      Arr: [],
      formData: {},
      visible: false
    };
  },

  created() {
    this.getList();
    this.getCommodityClass();
    this.getTagList();
  },
  methods: {
    dialogOut() {
      this.visible = false;
      this.getList();
    },
    handleSelectionChange(e) {
      this.Arr = e;
    },
    msg(e, type) {
      let form = {};
      if (type === "single") {
        form.goods_ids = e.distribute_goods_id;
        form.goods_name = e.goods_name;
        form.lprice =
          e.low_goods_price === e.up_goods_price
            ? e.low_goods_price
            : `${e.low_goods_price} - ${e.up_goods_price}`;
        form.sprice =
          e.low_cost === e.up_cost
            ? e.low_cost
            : `${e.low_cost} - ${e.up_cost}`;
        form.type = e.type;
        form.level = e.bili;
        form.sort = e.sort;
      } else {
        let arr = [];
        this.Arr.forEach(ele => {
          arr.push(ele.distribute_goods_id);
        });
        if (arr.length <= 0) return this.$message("请选择商品！");
        form.goods_ids = arr.join(",");
      }
      form.soft = type;
      this.formData = form;
      this.visible = true;
    },
    async del(id) {
      let ids = "";
      if (id) {
        ids = id;
      } else {
        let arr = [];
        this.Arr.forEach(ele => {
          arr.push(ele.distribute_goods_id);
        });
        if (arr.length <= 0) return this.$message("请选择商品！");
        ids = arr.join(",");
      }
      await this.$confirm("是否移除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          REMOVEDISTRIBUTEGOODS({ distribute_goods_ids: ids }).then(
            ({ code, msg }) => {
              if (code === 200) {
                this.getList();
              }
              this.$message({
                message: msg,
                type: code === 200 ? "success" : "error"
              });
            }
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消移除!"
          });
        });
    },
    async set(id, hot) {
      await SETHOT({ distribute_goods_id: id, is_hot: hot }).then(
        ({ code, msg }) => {
          if (code === 200) {
            this.getList();
          }
          this.$message({
            message: msg,
            type: code === 200 ? "success" : "error"
          });
        }
      );
    },
    add() {
      this.shows = "add";
    },
    out() {
      this.shows = "list";
      this.getList();
    },
    async getCommodityClass() {
      await GETLISTShopClass().then(({ code, data }) => {
        if (code === 200) {
          this.optionsTwo = data;
        }
      });
    },
    reset() {
      this.searchName = "";
      this.selectVal = "";
      this.selectValTwo = "";
      this.selectValThree = "";
      this.time = [];
      this.getList();
    },
    async getList() {
      await DISTRIBUTEGOODSLIST({
        page: this.pages,
        pageshow: 10,
        goods_name: this.searchName,
        status: this.selectVal,
        goods_type: this.selectValTwo[this.selectValTwo.length - 1],
        tag_id: this.selectValThree
      }).then(({ code, data, msg }) => {
        if (code === 200) {
          this.totals = data.count;
          this.listData = data.list;
        } else {
          this.totals = 0;
          this.listData = [];
          this.$message.error(msg);
        }
      });
    },
    async getTagList() {
      await TAGLIST({
        page: 1,
        pageshow: 10000000
      }).then(({ code, data }) => {
        if (code === 200) {
          this.optionsThree = data.list;
          this.optionsThree.unshift({ name: "全部标签", id: 0 });
        }
      });
    },
    changes(page) {
      this.pages = page;
      this.getList();
    }
  }
};
</script>
<style lang="scss" scoped>
.disf {
  float: left;
}
.disl {
  width: 20px;
  height: 100%;
  text-align: center;
  margin-right: 10px;
  color: #fff;
}
.disr {
  text-align: left;
}
</style>
